<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>波纹效果</title>
	<style type="text/css">
		html,body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			display: table;
		}

		.Buttons {
			display: table-cell;
			vertical-align: middle;
			height: auto;
			width: auto;
			text-align: center;
		}

		.Buttons button {
			height: 30px;
			background: none;
			border: none;
			padding:5px 15px;
			border-radius: 8px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			z-index:1000;
		}

		.Buttons button:focus {
			outline: none;
		}

		.Buttons button:nth-child(1) {
			background: #d1d2d4;
			color:#555;
		}

		.Buttons button:nth-child(2) {
			background: #009f5d;
			color:white;
		}

		.Buttons button:nth-child(3) {
			background: #019fde;
			color:white;
		}

		.Buttons button:nth-child(4) {
			background: #ff5675;
			color:white;
		}

		.Buttons button .ripple {
			position: absolute;
			background: rgba(0,0,0,.15);
			border-radius: 100%;
			transform: scale(0);
		}

		.Buttons button .ripple.show {
		  animation: ripple 1s ease-out;
		}
		@keyframes ripple {
		  to {
		    transform: scale(2);
		    opacity: 0;
		  }
		}

		.text {
			position: fixed;
			padding:0px 15px;
			line-height: 30px;
		}

		.text.show {
			animation: texts 3s ease-out;
			-webkit-animation: texts 3s ease-out;
			-moz-animation: texts 3s ease-out;
			-o-animation: texts 3s ease-out;
			-ms-animation: texts 3s ease-out;
		}

		@keyframes texts {
		  to {
		    top:0px;
		    left:0px;
		    opacity: 0;
		  }
		}
		@-moz-keyframes texts {
		  to {
		    top:0px;
		    left:0px;
		    opacity: 0;
		  }
		}
		@-webkit-keyframes texts {
		  to {
		    top:0px;
		    left:0px;
		    opacity: 0;
		  }
		}
		@-o-keyframes texts {
		  to {
		    top:0px;
		    left:0px;
		    opacity: 0;
		  }
		}
		@-ms-keyframes texts {
		  to {
		    top:0px;
		    left:0px;
		    opacity: 0;
		  }
		}

		#circle {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0px;
			left: 0px;
		}

		#circle circle {
			r: 0;
			stroke: rgb(1,159,160);
			stroke-width: 2;
			fill: rgb(1,159,160);
		}

		#circle circle.show {
			animation: circles .5s ease-out;
			-webkit-animation: circles .5s ease-out;
			-moz-animation: circles .5s ease-out;
			-o-animation: circles .5s ease-out;
			-ms-animation: circles .5s ease-out;
		}
		@keyframes circles {		
		    to {
		    	r: 120;
		    	opacity: 0;
		  	}
		}
		@-moz-keyframes circles {		
		    to {
		    	r: 120;
		    	opacity: 0;
		  	}
		}
		@-webkit-keyframes circles {		
		    to {
		    	r: 120;
		    	opacity: 0;
		  	}
		}
		@-o-keyframes circles {		
		    to {
		    	r: 120;
		    	opacity: 0;
		  	}
		}
		@-ms-keyframes circles {		
		    to {
		    	r: 120;
		    	opacity: 0;
		  	}
		}

		#ripple {
			position: absolute;
			left:0px;
			bottom: 0px;
			width:100%;
			height:150px;
			text-align: center;
			background:#019fde; 
		}
		#ripple p{
			margin:0px;
			line-height: 22px;
			color:#fff;
		} 

		#ripple svg circle {
			fill: white;
			-webkit-box-shadow: 0 0 3px #fff;
            -moz-box-shadow: 0 0 3px #fff;
            box-shadow: 0 0 9px #fff;
		}
		#ripple svg {
			background: url(./semantic/arrow_down.png) center no-repeat;
			width:120px;
			height:120px;
		}

		#ripple svg .in {
			stroke: #fff;
			stroke-opacity: 1.0; 
			stroke-width: 2;
			fill:#fff;
			fill-opacity:0.2;
		}
		#ripple svg .out {
			stroke: #fff;
			stroke-opacity: 0.7;
			stroke-width: 2; 
			-webkit-box-shadow: 0 0 3px #fff;
            -moz-box-shadow: 0 0 3px #fff;
            box-shadow: 0 0 9px #fff;
            fill:none;
		}

		#ripple svg .move {
			stroke: #fff;
			stroke-opacity: 0.9; 
			stroke-width: 2;
			transition: all 2s ease-out;
			-webkit-transition: all 2s ease-out;
			-moz-transition: all 2s ease-out;
			-o-transition: all 2s ease-out;
			-ms-transition: all 2s ease-out;
			fill:none;
		}

		#ripple svg .moveChange {
			stroke: #fff;
			stroke-opacity: 0.9; 
			stroke-width: 2;
			fill:none;
		}

		#ripple svg .show {
			r: 56;
			stroke-opacity: 0;
		}
	</style>
</head>
<body>
	<div class="Buttons">
		<button>Button1</button>
		<button>Button2</button>
		<button>Button3</button>
		<button>Button4</button>
		<span class="text"></span>
	</div>
	<svg id="circle" xmlns="http://www.w3.org/2000/svg">
		<circle></circle>
	</svg>
	<div id="ripple">
		<svg >
			<defs>
                <filter id="Gaussian_Blur">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
                </filter>
            </defs>
			<circle class="in" cx="60" cy="60" r="27"></circle>
			<circle class="out" cx="59.5" cy="60" r="33" filter="url(#Gaussian_Blur)"></circle>
			<circle class="move" cx="60" cy="60" r="27" filter="url(#Gaussian_Blur)"></circle>
		</svg>
		<p onclick="test()">点击查看更多</p>
	</div>
</body>
<script type="text/javascript">
	var btn = document.querySelector('.Buttons');  //按钮
	var text = document.querySelector('.Buttons').querySelector('.text'); //文字
	var circle = document.querySelector('#circle');    //波纹
	var ripple = document.querySelector('#ripple').querySelector('.move');
	var textLock = true;
	var circleLock = true;
	var rippleLock = true;
	/** 按钮波纹 及 文字滚动*/
	var btnRipple = function (e) {
		var target = e.target;
		if(target.tagName.toLowerCase() != 'button') return false;
		var gbcr = target.getBoundingClientRect(); //于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
		var ripple = target.querySelector('.ripple'); //查找是否存在class ripple
		if (ripple == null){
			ripple = document.createElement('span'); //创建节点
			ripple.className = 'ripple';
			ripple.style.height = ripple.style.width = Math.max(gbcr.width, gbcr.height) + 'px';
			//获取宽度高度中的最大值赋予水波宽度高度
			target.appendChild(ripple);
		}
		var top = e.pageY-gbcr.top-ripple.offsetHeight/2-document.body.scrollTop; //获取高度
    	var left = e.pageX-gbcr.left-ripple.offsetWidth/2-document.body.scrollLeft; //获取宽度
    	ripple.style.top = top + 'px';
    	ripple.style.left = left+ 'px';
    	ripple.classList.add('show');
    	/**文字*/
    	if(textLock){
			text.innerText = "张宇洋依旧还是大傻逼" + target.innerText;
			text.style.top = gbcr.top  + 'px';
	    	text.style.left = gbcr.left + 'px';
	    	text.style.background = typeof(target.currentStyle) == 'undefined'? getComputedStyle(target,false)['background-color']:target.currentStyle['background-color']; //适配浏览器
	    	text.style.color = typeof(target.currentStyle) == 'undefined'? getComputedStyle(target,false)['color']:target.currentStyle['color'];//适配浏览器
	    	text.classList.add('show');
	    	textLock = false;
    	}
    	return false;   //结束符 必加 
	};

	/** 鼠标波纹 **/
	var btnCircle = function (e) {
		if(e.target.tagName.toLowerCase() == 'button') return false;
		if(circleLock) {
			circle.querySelector("circle").style.cx = e.pageX + 'px';
			circle.querySelector("circle").style.cy = e.pageY + 'px';
			circle.querySelector("circle").classList.add('show');
			circleLock = false;
		}
		
		return false;
	};
	setInterval(function(){
		ripple.setAttribute("class", "move");
		ripple.classList.add('show');
	},1);
	btn.addEventListener('click',btnRipple,false);       		/** 监听click事件 **/ 
	circle.addEventListener('click',btnCircle,false);          /** 监听鼠标点击页面事件 **/
	/** 监听鼠标波浪事件 **/
	circle.querySelector('circle').addEventListener('animationend',function(){  
		circle.querySelector("circle").classList.remove('show');
		circleLock = true;
	});
	/** 监听文字动画结束 **/
	text.addEventListener('animationend',function(){      
		text.style = "";
		text.innerText = "";
		text.classList.remove('show');
		textLock = true;
	});
	/** 监听按钮波浪 **/
	[].forEach.call(btn.querySelectorAll('button'), function(div) {
	  	div.addEventListener('animationend',function(e){
			e.target.classList.remove('show');
		});
	});

	ripple.addEventListener('transitionend',function(){
		ripple.classList.remove('show');
		ripple.setAttribute("class", "moveChange");
	})
</script>
</html>